<template>
  <div class="question_item" v-if="Object.keys(item).length !== 0">
    <div @click="questionItemClick" class="content">
      <div class="title">{{item.tag}}</div>
      <div class="counter">
        <span>题目总数:</span>
        <span>{{item.list.length}}</span>
      </div>
    </div>
    <div class="cancel" @click="cancelCollect" title="取消收藏">
      <span class="el-icon-remove-outline"></span>
    </div>
  </div>
</template>

<script>
  import {cancelCollect} from "network/collect";

  export default {
    name: "QuestionItem",
    props: {
      item: {
        type: Object,
        default() {
          return {}
        }
      },
      category: {
        type: String,
        request: true
      }
    },
    methods: {
      questionItemClick() {
        this.$router.push({
          path: '/search/question/detail',
          name: 'questionDetail',
          params: {
            id: this.item._id,
            tag: this.item.tag
          }
        }, onComputed => {}, onAbort => {})
      },
      cancelCollect() {
        this.$confirm('取消收藏此题库, 是否确定?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const obj = {
            userId: this.$store.state.userInfo.id,
            type: "questions",
            category: this.category,
            collectId: this.item._id
          }
          cancelCollect(obj).then(res => {
            console.log(res)
            if(res.data.code) {
              this.$toast.show('取消收藏成功', 'success', 1000)
              this.$bus.$emit('questionRefresh')
            }
          })
        }).catch(() => {});
      }
    }
  }
</script>

<style scoped>
  .question_item {
    width: 720px;
    height: 50px;
    margin: 10px auto 0;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid #eee;cursor: pointer;
    line-height: 50px;
  }

  .question_item:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
  }

  .content {
    float: left;
    width: 95%;
  }

  .content .title {
    float: left;
    margin-right: 20px;
    font-weight: 700;
  }

  .content .counter {
    float: left;
  }

  .counter span:nth-child(1) {
    margin-right: 5px;
  }

  .cancel {
    position: relative;
    float: right;
    width: 5%;
    height: 50px;
  }

  .cancel .el-icon-remove-outline {
    position: absolute;
    top: 17px;
    left: -1px;
    color: #8F9395;
    font-size: 16px;
  }

  .cancel:hover .el-icon-remove-outline {
    color: #002766;
    cursor: pointer;
  }



</style>
